<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>预约系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{../layui/css/layui.css}">
    <script src="../jquery3.5.1/jquery-3.5.1.min.js"></script>
    <script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="background-color: wheat;"><!--border: 2px solid black-->
<!--<p th:text="${user.username}"></p>-->
<div class="layui-header" style="padding-top: 20px;"><!--border: 1px solid black-->
    <div style="height: 80px;text-align: center;font-size: 25px;">
        <div style="width: 8%;padding-left: 2%;float: left;"><!--border: 1px solid black-->
            欢迎
            <span id="user" th:text="${session.user==null?'':session.user.getUsername()}"></span>
        </div>
        <div style="width: 60% ;float: left;"><!--border: 1px solid black-->
            <p style="padding-left: 30%">
                <b>车位预约系统</b>
            </p>
        </div>
        <div style="float: left;width: 28%;display: inline-block;"><!--border: 1px solid black-->
            <a class="layui-btn" lay-event="edit" id="message">个人信息</a>
            <button class="layui-btn" id="site">预约情况</button>
            <button class="layui-btn" id="order">历史订单</button>
        </div>
    </div>
</div>
<div class="layui-container">
    <div style="border: 1px solid red">
        <!-- 内容主体区域 -->
        <div style="padding:0px;">
            <iframe src="../jump?url=parking_space_to_user" frameborder="0" id="change"
                    style="width: 100%; height: 800px; border-radius: 2px;"></iframe>
        </div>
        <table id="tab" cellpadding="1" cellspacing="0" border="1" class="layui-table">
            <!--    <caption align="top">流程管理</caption>-->
            <!--    <thead>-->
            <tr>
<!--                <th>车辆号</th>-->
                <th>车位号</th>
                <th>入场时间</th>
                <th>出场时间</th>
                <th>总计</th>
            </tr>
            <!--    </thead>-->
            <tbody></tbody>
        </table>
    </div>
</div>
<script th:inline="javascript">
    layui.use(['table', 'layer'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        $("#message").click(function () { //注：tool 是工具条事件名,demo1 是table原始容器的属性,lay-filter="对应的值"
            let uid = [[${session.user==null?'':session.user.getUid()}]];
            layer.open({
                type: 2,
                title: '用户信息',                 //弹框标题
                content: '/jump?url=user_edit' + uid,      //iframe层，加载新页面
                area: ['600px', '500px'],         //宽高
                closeBtn: 1,                     //默认1，如果不显示为0，好看一点为2
                shade: [0.5, 'green'],                      //默认是0.3透明度的黑色遮罩背景
                //end层关闭后触发的回调
                // end: function (d) {
                //
                // },

            });
        })
    });
</script>
<script th:inline="javascript">
    $("#site").click(function () {
        let uid = [[${session.user==null?'':session.user.getUid()}]];
        $.ajax({
            type: "post",
            url: "/getSiteById",
            data: {"uid": uid},
            dataType: "JSON",
            success: function (resp) {
                console.log(resp)
                if (resp.pid !== null) {
                    alert("您预定的车位号是：" + resp.pid);
                } else {
                    alert("您还没有预订车位！！！")
                }
            },
            error: function () {
                alert("服务器出错了，请联系XXX");
            },
        })
    })
    $("#order").click(function () {
        let uid = [[${session.user==null?'':session.user.getUid()}]];
        $.ajax({
            type: "post",
            url: "/getOrderById",
            data: {"uid": uid},
            dataType: "JSON",
            success: function (data) {
                console.log(data)
                // if (data) {
                //     alert(data);
                // }
                for (var i = 0; i < data.length; i++) {
                    //拼接表格的行和列
                    str = "<tr><td>" + data[i].pid + "</td><td>" + data[i].intoParkingTime + "</td><td>" + data[i].outParkingTime + "</td><td>" + data[i].totalCost + "</td></tr>";
                    //追加到table中
                    $("#tab").append(str);
                }
            },
            error: function () {
                alert("服务器出错了，请联系XXX");
            },
        })
    })
</script>

</body>
</html>